import React, {Component} from 'react';
import {Button, Form, Row, Col, Tabs, Input, Select,Table} from 'antd';
import {Consumer, Provider} from "../store";
import {config} from "../config";
import '../css/tableManage.css';
import {TableAdds} from "../components/EditComponent";

const TabPane = Tabs.TabPane;
const Option = Select.Option;

class storageManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabPosition: 'left',
            status: 0,
            tableData:[
                {
                    table_id:'001',
                    number:1,
                    table_type:'1',
                    table_num:5,
                    remark:'备注'
                },
                {
                    table_id:'002',
                    number:2,
                    table_type:'2',
                    table_num:3,
                    remark:'备注'
                },
                {
                    table_id:'003',
                    number:3,
                    table_type:'3',
                    table_num:2,
                    remark:'备注'
                },
            ],
            loading:false
        }
    };

    columns = [
        {
            title: '序号',
            dataIndex: 'number'
        },
        {
            title: '类型',
            dataIndex: 'table_type',
            render: good_type => {
                let text = '';
                if (good_type == 1) {
                    text = '大桌';
                } else if (good_type == 2) {
                    text = '中桌';
                } else {
                    text = '小桌';
                }
                return (
                    <span>{text}</span>
                )
            }
        },
        {
            title: '座位数',
            dataIndex: 'table_num',
        },
        {
            title: '备注',
            dataIndex: 'remark',
        },
        {
            title: '操作',
            dataIndex: this.columns,
            render: data => {
                return (
                    <span>
                        <span style={{color: 'red', cursor: 'pointer'}}
                              onClick={() => this.handleFinish(data.car_id)}>{'删除'}</span>
                        <span style={{color: '#1890ff', cursor: 'pointer', marginLeft: '10px'}}
                              onClick={() => this.handleFinish(data.car_id)}>{'修改'}</span>
                    </span>
                )
            }
        }
    ];

    render() {
        return (
            <div className="tableManage">
                <div className="tableManageHeader"></div>
                <div className="tableManageContainer">
                    <Tabs tabPosition={this.state.tabPosition} defaultActiveKey="2"
                          tabBarStyle={{width: 120, textAlign: 'center'}}>
                        <TabPane tab="餐桌列表" key="1">
                            <div className="tableListContainer">
                                <div className="tableListContainerSearch">
                                    <div className="tableListContainerSearchInput">餐桌号：<Input style={{width: 180}}
                                                                                              placeholder="请输入"/></div>
                                    <div className="tableListContainerSearchInput">类型：
                                        <Select placeholder="请选择" style={{width: 180}}>
                                            <Option value="1">大桌</Option>
                                            <Option value="2">中桌</Option>
                                        </Select>
                                    </div>
                                    <div className="tableListContainerSearchInput">状态：
                                        <Select placeholder="请选择" style={{width: 180}}>
                                            <Option value="1">空闲</Option>
                                            <Option value="2">使用中</Option>
                                        </Select>
                                    </div>
                                    <div className="tableListContainerSearchInput">
                                        <Button type={'primary'}>搜索</Button>
                                        <TableAdds/>
                                    </div>
                                </div>
                                <div className="tableListNum">共20台桌</div>
                                <div className="tableListContainerList">
                                    <div className="tableListContainerListItem">
                                        <div className="tableListContainerListItemImg">
                                            <img/>
                                        </div>
                                        <div className="tableListContainerListItemInfo">
                                            <div className="tableListContainerListItemLeft">
                                                <div className="ListItemInfoLeftItem">餐号：20111</div>
                                                <div className="ListItemInfoLeftItem">座位：4人</div>
                                                <div className="ListItemInfoLeftItem">类型：大桌</div>
                                                <div className="ListItemInfoLeftItem">标签：大厅</div>
                                            </div>
                                            <div className="tableListContainerListItemRight">
                                                {
                                                    this.state.status == 1 ?
                                                        <div className="ListItemRightBtn">
                                                            <Button type={'primary'} size={'small'}>使用中</Button>
                                                        </div> :
                                                        <div>
                                                            <div className="ListItemRightBtn"><Button
                                                                className={'freeBtn'} type={'primary'}
                                                                size={'small'}>空闲</Button></div>
                                                            <div className="ListItemRightBtn"><Button type={'primary'}
                                                                                                      size={'small'}>编辑</Button>
                                                            </div>
                                                            <div className="ListItemRightBtn"><Button
                                                                className={'deleteBtn'} type={'danger'} size={'small'}>删除</Button>
                                                            </div>
                                                        </div>
                                                }
                                            </div>
                                        </div>
                                    </div>
                                    <div className="tableListContainerListItem">
                                        <div className="tableListContainerListItemImg">
                                            <img/>
                                        </div>
                                        <div className="tableListContainerListItemInfo">
                                            <div className="tableListContainerListItemLeft">
                                                <div className="ListItemInfoLeftItem">餐号：20111</div>
                                                <div className="ListItemInfoLeftItem">座位：4人</div>
                                                <div className="ListItemInfoLeftItem">类型：大桌</div>
                                                <div className="ListItemInfoLeftItem">标签：大厅</div>
                                            </div>
                                            <div className="tableListContainerListItemRight">
                                                {
                                                    this.state.status == 1 ?
                                                        <div className="ListItemRightBtn">
                                                            <Button type={'primary'} size={'small'}>使用中</Button>
                                                        </div> :
                                                        <div>
                                                            <div className="ListItemRightBtn"><Button
                                                                className={'freeBtn'} type={'primary'}
                                                                size={'small'}>空闲</Button></div>
                                                            <div className="ListItemRightBtn"><Button type={'primary'}
                                                                                                      size={'small'}>编辑</Button>
                                                            </div>
                                                            <div className="ListItemRightBtn"><Button
                                                                className={'deleteBtn'} type={'danger'} size={'small'}>删除</Button>
                                                            </div>
                                                        </div>
                                                }
                                            </div>
                                        </div>
                                    </div>
                                    <div className="tableListContainerListItem">
                                        <div className="tableListContainerListItemImg">
                                            <img/>
                                        </div>
                                        <div className="tableListContainerListItemInfo">
                                            <div className="tableListContainerListItemLeft">
                                                <div className="ListItemInfoLeftItem">餐号：20111</div>
                                                <div className="ListItemInfoLeftItem">座位：4人</div>
                                                <div className="ListItemInfoLeftItem">类型：大桌</div>
                                                <div className="ListItemInfoLeftItem">标签：大厅</div>
                                            </div>
                                            <div className="tableListContainerListItemRight">
                                                {
                                                    this.state.status == 1 ?
                                                        <div className="ListItemRightBtn">
                                                            <Button type={'primary'} size={'small'}>使用中</Button>
                                                        </div> :
                                                        <div>
                                                            <div className="ListItemRightBtn"><Button
                                                                className={'freeBtn'} type={'primary'}
                                                                size={'small'}>空闲</Button></div>
                                                            <div className="ListItemRightBtn"><Button type={'primary'}
                                                                                                      size={'small'}>编辑</Button>
                                                            </div>
                                                            <div className="ListItemRightBtn"><Button
                                                                className={'deleteBtn'} type={'danger'} size={'small'}>删除</Button>
                                                            </div>
                                                        </div>
                                                }
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </TabPane>

                        <TabPane tab="餐桌类型" key="2">
                            <div className="tableTypeContainer">
                                <Row className="tableTypeAdd">
                                    <div className="tableTypeAddInput">
                                        <div style={{width:50}}>类型：</div><Input style={{marginTop:23}} placeholder="请输入"/>
                                    </div>
                                    <div className="tableTypeAddInput">
                                        <div style={{width:50}}>序号：</div><div><Input style={{marginTop:23}} placeholder="请输入"/></div>
                                    </div>
                                    <div className="tableTypeAddInput">
                                        <div style={{width:50}}>备注：</div><div><Input style={{marginTop:23}} placeholder="请输入"/></div>
                                    </div>
                                    <div style={{marginLeft:20}}>
                                        <Button type={'primary'}>添加</Button>
                                    </div>
                                </Row>

                                <div className="tableTypeContainerTable">
                                    <Table
                                        columns={this.columns}
                                        rowKey={record => record.table_id}
                                        loading={this.state.loading}
                                        dataSource={this.state.tableData}
                                        pagination={false}
                                    >
                                    </Table>
                                </div>
                            </div>
                        </TabPane>

                        <TabPane tab="餐桌设置" key="3">餐桌设置</TabPane>
                    </Tabs>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;//获取订单管理的上下文状态
        dispatch({menuType: "订单管理"});
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

};
const StorageManages = Form.create()(storageManage);
export default prop => (
    <Consumer>
        {
            props => (
                <StorageManages {...prop} {...props} />
            )
        }
    </Consumer>
);